<!-- 核对订单 -->
<template>
	<view>
		<view class="bg-white">
			<cu-custom bgColor="bg-gradual-write" :isBack="true">
				<block slot="backText"></block>
				<block slot="content">确认订单</block>
			</cu-custom>
			<u-notice-bar :text="notice"></u-notice-bar>
		</view>
		<view class="cu-card dynamic isCard">
			<view class="cu-item shadow">
				<view class="cu-list menu-avatar margin-bottom-xs">
					<view class="cu-item">
						<view class="cu-avatar" style="border-radius: 100%;">
							<image style="width: 100%; height: 100%; border-radius: 100%;"
								src="@/static/logo.jpg"></image>
						</view>
						<view class="content flex-sub">
							<view>{{room.roomName}}</view>
							<view class="text-gray text-sm flex justify-between">
								{{seatDesc}}
							</view>
						</view>
						<view class="action text-blue text-bold text-dflg" style="width: 150rpx;">
							空闲
						</view>
					</view>
				</view>
				<view class="padding-lr">
					<u--form labelPosition="left" labelWidth="90" :model="uFromMode" ref="uForm">
						<u-form-item label="开始时间" prop="dateInfo.startDate" borderBottom ref="startDate">
							<u--input readonly placeholder="" border="surround"
								v-model="uFromMode.dateInfo.startDateDv"></u--input>
						</u-form-item>
						<u-form-item label="结束时间" prop="dateInfo.endDate" borderBottom ref="endDate">
							<u--input readonly placeholder="" border="surround"
								v-model="uFromMode.dateInfo.endDateDv"></u--input>
						</u-form-item>
					</u--form>
				</view>
				<view class="text-gray text-sm padding solid-top">
					说明：提交前请确认座位、开始时间、结束时间信息，完成支付后按照如上信息自助入内学习。
				</view>
			</view>
		</view>

		<view class="bg-white padding-lr-sm padding-top-sm cu-list menu sm-border card-menu">
			<text class="text-bold text-black text-lg">订单金额</text>
			<view class="cu-item" style="min-height: 90rpx; padding: 0;">
				<view class="content">
					<text class="text-grey text-smdf">卡券</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">支持团购兑换<text class="cuIcon-right"></text></text>
				</view>
			</view>

			<view class="cu-item" style="min-height: 90rpx; padding: 0;">
				<view class="content">
					<text class="text-grey text-smdf">订单金额</text>
				</view>
				<view class="action">
					<text class="text-black text-bold text-smdf">{{totalPrice + '元'}}</text>
				</view>
			</view>

			<view class="cu-item" style="min-height: 90rpx; padding: 0;">
				<view class="content">
					<text class="text-grey text-smdf">余额</text>
				</view>
				<view class="action">
					<text class="text-orange text-bold text-smdf ">{{'-'+ payBalance + '元'}}</text>
				</view>
			</view>
		</view>

		<view class="bg-white padding-lr-sm cu-list menu sm-border card-menu" style="margin-top: 20rpx !important;">
			<view class="cu-item" style="padding: 0;">
				<view class="content">
					<text class="text-grey text-smdf">总计</text>
				</view>
				<view class="action">
					<text class="text-black text-df margin-right-xs">
						小计
					</text>
					<text class="text-black text-bold text-lg">
						{{'￥'+payPrice}}
					</text>
				</view>
			</view>
		</view>

		<view class="margin-lr margin-top-sm margin-bottom-lg text-gray text-sm">
			下载说明：支付成功后，订单信息可前往【我的】-【我的订单】中查看
		</view>
		<view class="cu-bar bg-white"></view>
		<view class="cu-bar bg-white tabbar border shop foot">
			<view class="action text-red" style="width: 60% !important;">
				<text class="text-df">待支付：</text>
				<text class="text-lg text-bold">{{'￥'+payPrice}}</text>
			</view>
			<view @click="payment()" class="bg-green submit text-lg">去支付</view>
		</view>
	</view>
</template>

<script>
	import {
		toast,
		showConfirm,
		tansParams
	} from '@/utils/common'
	import {
		orderSeat
	} from '@/api/sr/seatOrder'
	import {
		getRoomInfo,
		getRoomBanners,
		getRoomDetail,
		getRoomPrices
	} from '@/api/sr/room'
	export default {
		data() {
			return {
				notice: '使用说明：使用【碧华自助自习室小程序】下单后，通过APP开门到选定座位就坐学习哦~',
				showStartDate: false,
				showEndDate: false,
				uFromMode: {
					dateInfo: {
						startDate: '',
						startDateDv: '',
						endDate: '',
						endDateDv: '',
					},
				},
				room: {},
				seat: {},
				seatDesc: '',
				total: 0,
				dateType: '',
				priceId: undefined,
				unitPrice: undefined,
				totalPrice: undefined,
				payPrice: undefined,
				payBalance: undefined,
			};
		},
		onLoad(option) {
			this.room = JSON.parse(option.room)
			this.seat = JSON.parse(option.seat)
			console.info('seat', this.room, this.seat, option.start, option.end, option.priceType)
			this.priceType = option.priceType;
			this.uFromMode.dateInfo.startDate = option.start;
			this.uFromMode.dateInfo.endDate = option.end;
			this.total = option.total;
			this.seatDesc = this.seat.areaName + '  第'+ this.seat.seatNum +'号桌, 时间：';
			if (this.priceType === '0') {
				this.uFromMode.dateInfo.startDateDv = option.start.substring(0, option.start.length - 3);
				this.uFromMode.dateInfo.endDateDv = option.end.substring(0, option.end.length - 3);
			} else if (this.priceType === '1') {
				this.uFromMode.dateInfo.startDateDv = option.start.substring(0, option.start.length - 9);
				this.uFromMode.dateInfo.endDateDv = option.end.substring(0, option.end.length - 9);
			};
			this.getRoomPrices();
		},
		computed: {
			balance() {
				return this.$store.state.user.balance
			},
		},
		methods: {
			async getRoomPrices() {
				const that = this;
				let search = {
					roomId: that.room.roomId,
					status: 0,
					priceType: this.priceType,
					params:{
						payDate: this.uFromMode.dateInfo.startDate
					}
				};
				getRoomPrices(search).then(response => {
					let data = response.data;
					console.info('getRoomPrices', data)
					if(data != null && data.length>0){
						that.unitPrice = data[0].price;
						that.priceId = data[0].id;
						if (that.priceType === '0') {
							that.seatDesc = that.seatDesc + that.total +'小时'
							that.totalPrice = that.total * that.unitPrice;
						} else if (that.priceType === '1') {
							that.seatDesc = that.seatDesc + that.total +'天'
							that.totalPrice = that.total * that.unitPrice;
						};
						let balance = that.$store.state.user.balance;
						console.info('balance', balance, that.totalPrice)
						if (balance < that.totalPrice) {
							that.payBalance = balance;
							that.payPrice = that.totalPrice - balance;
						} else {
							that.payBalance = that.totalPrice;
							that.payPrice = 0;
						}
					}
				});
			},					
			async pay() {
				uni.showLoading({
					title: '正在预定中'
				})
				const params = {
					description: "预定座位" + this.seat.areaName + '-' + this.seat.seatNum,
					startTime: this.uFromMode.dateInfo.startDate,
					endTime: this.uFromMode.dateInfo.endDate,
					roomId: this.seat.roomId,
					areaId: this.seat.areaId,
					seatId: this.seat.seatId,
					priceId: this.priceId,
					unitPrice: this.unitPrice,
					priceType: this.priceType,
					times: this.total,
					total: this.totalPrice,
					actualTotal: this.totalPrice,
					payType: 0,
					payPrice: this.payPrice,
					payBalance: this.payBalance
				}
				console.log(params)
				orderSeat(params).then(res => {
					console.log("orderSeat", res)
					setTimeout(() => {
						uni.showToast({
							icon: 'success',
							title: '预定成功'
						})
						uni.switchTab({
							url: '/pages/order/orderlist'
						})
					}, 2000)
				}).catch(errors => {})
			},
			payment() {
				uni.showToast({
					title: '请调用支付接口',
					duration: 1400,
					icon: 'none'
				});
				if (this.total > 1) {
					this.pay()
				} else {
					toast('预约时间至少一个小时，请重新预约！')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>